<template>
  <div class="btn-container">
    <button class="btn btn-primary btn-ghost btn-shine">
      hover me
    </button>
  </div>
</template>
<style lang="scss" scoped>
  .btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    height: 140px;
    background: #1a1e23;

    .btn {
      $r: 0;
      $g: 185;
      $b: 209;
      position: relative;
      padding: 1em 3em;
      font-size: 1em;
      background: transparent;
      color: #fff;
      border: 1px solid rgb($r, $g, $b);
      cursor: pointer;
      text-decoration: none;
      overflow: hidden;
      &-shine {
        &::before {
          position: absolute;
          content: '';
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(-45deg,transparent, rgba($r,$g,$b,0.5), transparent);
          transform: translateX(-100%);
          transition: 0.6s;
        }
        &:hover {
          box-shadow: 0px 0px 15px 10px rgba($r,$g,$b,0.5);
          &::before {
            transform: translateX(100%);
          }
        }
      }
    }
  }
</style>
